<script setup>
import { ref } from 'vue'
import { sign } from '../../api/login.js'
import { useRouter } from 'vue-router'
defineOptions({
  name: 'AppSign'
})
const data = ref({
  username: '',
  password: '',
  repassword: '',
  agree: false
})
const rule = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    {
      min: 6,
      max: 18,
      message: '用户名长度在6到18个字符',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 8,
      max: 16,
      message: '密码长度在8到16个字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      validator(rule, value, callback) {
        if (value !== data.value.password)
          callback(new Error('两次输入密码不一致'))
        callback()
      }
    }
  ],
  agree: [
    {
      validator(rule, value, callback) {
        if (value) return callback()
        return callback(new Error('请同意用户协议'))
      }
    }
  ]
})
const form = ref(null)
const router = useRouter()
const sub = async () => {
  await form.value.validate()
  sign({
    loginname: data.value.username,
    password: data.value.password
  }).then((result) => {
    console.log(result)
    if (result.data.code === '200') {
      ElMessage.success('注册成功，即将跳转登录页')
      setTimeout(() => router.push('/Login'), 1500)
    } else ElMessage.error('注册失败，用户名重复')
  })
}
</script>

<template>
  <div class="vh-100 bg-light con">
    <navBar></navBar>
    <div class="row py-5 bg-white">
      <div class="my-5 col-6 offset-3">
        <h2 class="my-3" align="center">用户注册</h2>
        <el-form ref="form" :model="data" :rules="rule" status-icon>
          <el-form-item
            label="用户名：&ensp;&ensp;&ensp;&ensp;"
            prop="username"
          >
            <el-input
              v-model="data.username"
              placeholder="请输入用户名"
            ></el-input> </el-form-item
          ><el-form-item
            label="密码：&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;"
            prop="password"
          >
            <el-input
              v-model="data.password"
              placeholder="请输入密码"
              show-password
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="二次密码：&ensp;&ensp;" prop="repassword">
            <el-input
              v-model="data.repassword"
              placeholder="请输入密码"
              show-password
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="data.agree">我已同意阅读注册协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button class="w-100" type="primary" @click="sub"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
        <el-link @click="$router.push('/login')">已有账号？去登录</el-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.con{
  overflow: hidden;
}
</style>
